<template>
  <view class="container" :style="{paddingTop: marginTops+'px'}">
    <view class="content clear u-f-ac u-f-jsb f-w-w" :class="!liststyle ? '' : 'liststyle'"
      style="display:none;" :style="{'display': show_hide}">
      <view class="list" v-for="(item,index) in res" :key="index" @tap="opendetail" :data-newsid="item.id">
        <view class="imgbox">
          <image class="image" :src="item.thumb"></image>
        </view>
        <view class="detail">
          <view class="name">{{item.title}}</view>
          <view class="productprice">¥{{item.productprice}}</view>
          <view class="price">
            <view class="text">¥{{item.marketprice}}</view>
            <view class="buy">
              <image src="http://easycolor.juxingqiansheng.com/attachment/images/5/2018/10/jifen.png"></image>
            </view>
          </view>
        </view>
        <view class="buy-btn">
          <button class="mini-btn buybutton">购买</button>
        </view>
      </view>
    </view>

    <view :style="{'display': show_hide_content}">
      <view class="page-body">
        <!-- <scroll-view class="nav-left" scroll-y :style="'height:'+height+'px'"> -->
        <scroll-view class="nav-left" scroll-y>
          <view class="nav-left-item" @click="categoryClickMain(item,index)" :key="index"
            :class="index==categoryActive?'active':''" v-for="(item,index) in categoryList">
            {{item.name}}
          </view>
        </scroll-view>
        <scroll-view class="nav-right" scroll-y :scroll-top="scrollTop" @scroll="scroll" :style="'height:'+height+'px'"
          scroll-with-animation>
          <view class="search">
            <view class="searchbar u-f-ac">
              <image src="/static/search.png"></image>
              <input type="text" @confirm="searchGoods" placeholder="搜索" placeholder-class="placeholders"
                confirm-type="search" v-model="inputvalue">
            </view>
          </view>
          <view class="nav-right-item_box">
            <view :id="index===0?'first':''" class="nav-right-item u-f-ajc u-f-column"
              v-for="(item,index) in subCategoryList" :key="index" @click="jump" :data-id="item.id">
              <view class="image_bg u-f-ajc">
                <image :src="item.thumb" />
              </view>
              <view class="ellipsis-2 text">{{item.name}}</view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        inputvalue: '',
        show_hide_content: 'block',
        show_hide: 'none',
        res: [],
        categoryList: [],
        subCategoryList: [],
        height: 0,
        categoryActive: 0,
        scrollTop: 0,
        scrollHeight: 0,
        liststyle: false,

        marginTops: uni.upx2px(480),
      }
    },
    onLoad: function() {
      let that = this
      uni.getSystemInfo({
        success: function(res) {
          console.log(res.statusBarHeight);
          // if (res.statusBarHeight) that.marginTops = res.statusBarHeight + uni.upx2px(480)
          if (res.statusBarHeight) that.marginTops = uni.upx2px(480)
        }
      });
      uni.showLoading()
      this.setAjax();
      this.height = uni.getSystemInfoSync().windowHeight - 45;
    },
    methods: {
      scroll(e) {
        this.scrollHeight = e.detail.scrollHeight;
      },
      categoryClickMain(categroy, index) {
        console.log(categroy)
        console.log(this.categoryList[0])
        this.categoryActive = index;
        this.subCategoryList = categroy.subCategoryList;
        this.scrollTop = -this.scrollHeight * index;
      },
      setAjax() {
        uni.request({
          url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=shop.category&app=1',
          success: res => {
            uni.hideLoading()
            console.log(JSON.stringify(res.data.tuijian))
            var p = res.data.category.parent[0]
            var c = res.data.category.children
            var tj = [{
              "id": "0",
              "name": "所有商品",
              "thumb": '../../static/list.jpg'
            }]
            for (var i in res.data.tuijian) {
              tj.push(res.data.tuijian[i])
            }
            this.categoryList.push({
              "id": "0",
              "name": "推荐分类",
              "subCategoryList": tj,
            })
            for (var i in p) {
              this.categoryList.push({
                'id': p[i].id,
                "name": p[i].name,
                'subCategoryList': []
              })
            }
            for (var a in c) {
              for (var j in this.categoryList) {
                if (this.categoryList[j].id == a) {
                  this.categoryList[j].subCategoryList = c[a]
                }
              }
            }
            this.categoryClickMain(this.categoryList[0], 0)
          },
          fail: () => {},
          complete: () => {}
        });

      },
      jump(e) {
        var id = e.currentTarget.dataset.id
        uni.navigateTo({
          url: '../goods/goods?cate=' + id
        });
      },
      searchGoods(e) {
        uni.showLoading()
        uni.request({
          url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=goods.get_list&keywords=&isrecommand=&ishot=&isnew=&isdiscount=&issendfree=&istime=&order=&by=&merchid=&page=1&keywords=' +
            e.mp.detail.value,
          method: 'GET',
          success: res => {
            if (this.inputvalue == '') {
              uni.navigateBack();
              return
            }
            this.res = res.data.result.list;
            console.log(this.res)

            // if(res.data.result.total > res.data.result.pagesize){
            // 	this.load = 1
            // }

            this.show_hide = 'block'
            this.show_hide_content = 'none'
            uni.hideLoading();
          },
          fail: () => {},
          complete: () => {}
        });
      }
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #B0C0C4;
  }

  .container {
    padding: 480rpx 30rpx;
    box-sizing: border-box;

    width: 100%;
    height: 100vh;
    // background: url(/static/jibei/category/category_bg.png) no-repeat 0 0;
    background-size: cover;
  }

  .page-body {
    display: flex;
  }

  .nav {
    display: flex;
    width: 100%;
  }

  .nav-left {
    width: 27%;
    height: 860rpx;
    // background: url(/static/jibei/category/shu_kuang.png) no-repeat 0 0;
    background-size: cover;
    padding: 94rpx 0 0;
    box-sizing: border-box;
  }

  .nav-left-item {
    height: 72upx;
    font-size: 28upx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    background-image: linear-gradient(to right, #9EE9FF, #fff);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    /*需要文字透明*/
  }

  .nav-right {
    width: 73%;
    // background-color: #FFFFFF;
    box-sizing: border-box;
  }

  .nav-right-item_box {
    padding: 0 30rpx;
  }

  .nav-right-item {
    width: 33.3%;
    height: 200upx;
    float: left;
    text-align: center;
    font-size: 28upx;
    // margin-top: 6rpx;

    .text {
      font-size: 24upx;
      line-height: 40upx;
      color: #0E507F;
    }

    .image_bg {
      width: 140upx;
      height: 140upx;
      // background: url(/static/jibei/category/kuang.png) no-repeat 0 0;
      background-size: cover;

      image {
        width: 70%;
        height: 70%;
        border-radius: 100%;
        background: #eebc06;
      }
    }
  }



  .active {
    position: relative;
    font-size: 36rpx;
  }

  .active:before {
    width: 0;
    height: 100%;
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    border-left: 4upx solid #000;
  }

  .searchbar {
    width: 100%;
    height: 80upx;
    // background: url(/static/jibei/category/search.png) no-repeat 0 0;
    background-size: cover;
    position: relative;
    margin: 50rpx 0 30rpx;
    padding: 0 80rpx;

    image {
      width: 40upx;
      height: 40upx;
    }

    .placeholders {
      color: #EFDDA5;
      font-size: 28rpx;
    }

    input {
      color: #EFDDA5 !important;
      flex: 1;
      margin: 0;
      padding-left: 20upx;
    }
  }

  .content {
    padding: 0 8upx;
    display: flex !important;
  }

  .list {
    border-radius: 10rpx;
    overflow: hidden;
    padding: 10upx;
    width: 48%;
    background: #FFFFFF;
    margin-bottom: 30rpx;
  }

  .imgbox {
    width: 100%;
    height: 346upx;
  }

  .image {
    width: 100%;
    height: 346upx;
  }

  .detail {
    padding: 20upx;
  }

  .buy-btn:after {
    display: block;
    content: "";
    clear: both;
  }

  .buy-btn {
    background: #fff;
    padding-right: 20upx;
    padding-bottom: 20upx;
  }

  .name {
    height: 68upx;
    font-size: 26upx;
    line-height: 34upx;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .productprice {
    line-height: 48upx;
    font-size: 24upx;
    color: #999;
    text-decoration: line-through;
  }

  .price,
  .buy {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }

  .price .text {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    color: #000;
    font-size: 30upx;
    line-height: 38upx;
  }

  .price text {
    color: #000
  }

  .price image {
    width: 38upx;
    height: 38upx;
    display: block;
    margin-right: 5upx;
    position: relative;
    top: -2upx;
  }

  .buy text {
    line-height: 38upx;
  }

  .liststyle {
    padding: 0;
  }

  .liststyle .list {
    width: 710upx;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    background: #fff;
    height: 196upx;
    padding: 20upx;
    float: inherit;
    border-bottom: 2upx solid #e7e7e7;
  }

  .liststyle .imgbox {
    height: 196upx;
  }

  .liststyle .detail {
    height: 156upx;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }

  .liststyle .list .image {
    width: 160upx;
    height: 160upx;
    margin-top: 18upx;
  }

  .liststyle .buy-btn {
    padding: 0;
    padding-top: 74upx;
  }

  .buybutton {
    width: 90upx;
    height: 48upx;
    float: right;
    border: 1px solid #000;
    color: #000;
    padding: 0 15upx;
    background: #fff;
    line-height: 44upx;
    font-size: 24upx;
  }
</style>
